<template>
  <div class="productmanagement-page">
    <el-row>
    <el-col >
      <div class="header">
        <el-form :inline="true">
          <el-form-item label="区域搜索：">
            <el-input v-model="skuNam1" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="grid-content">
          <!--新建按钮 ---------------------------------------------------------------------------------->
          <el-button
            class="btn"
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="openNew">新建</el-button>
          <!--导入数据按钮 ---------------------------------------------------------------------------------->
          <el-button
            class="btn1"
            type="primary"
            @click="inputData">导入数据</el-button>

          <!--弹出框（遮罩层新建按钮） -------------------------------------------------------------------------------- -->

          <el-dialog :title="!isAdd ? '新增商品' : '修改商品'" :visible.sync="dialogFormVisible1">
            <el-form  :rules="rules1" ref="ruleForm1" :model="ruleForm1">
              <el-form-item label="商品名称："   label-width="100px">
                <el-input v-model="skuName" placeholder="请输入"
                maxlength="15"
                show-word-limit
                style="width:450px"
                ></el-input>
              </el-form-item>
              <el-form-item label="品牌：" prop="brandName" label-width="100px">
                <el-input v-model="brandName" placeholder="请输入"
                maxlength="10"
                show-word-limit
                style="width:450px"></el-input>
              </el-form-item >
              <el-form-item label="商品价格（元）：" prop="price" label-width="140px">
                <el-input-number  placeholder="请输入" v-model="price" controls-position="right"
                 @change="handleChange"
                 style="width:450px">
                </el-input-number>
              </el-form-item>
              <el-form-item label="商品类型：" prop="classId" label-width="100px">
                <el-select v-model="value" placeholder="请选择" style="width:450px">
                  <el-option
                  v-for="(item,index) in listArr"
                  :key="index"
                  :label="item.lable"
                  :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="规格：" prop="unit" label-width="100px" maxlength="10"
                show-word-limit>
                <el-input v-model="unit" placeholder="请输入" style="width:450px"></el-input>
              </el-form-item>

              <el-form-item label="商品图片：" prop="skuImage" label-width="100px" >
                  <el-upload
                      :on-success="picFn"
                      name='fileName'
                      class="upload-demo"
                      action="https://likede2-admin.itheima.net/likede/api/vm-service/sku/fileUpload"
                      multiple
                      :file-list="fileList">
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text" ><em>点击上传</em></div>
                      <div class="el-upload__tip" slot="tip">支持扩展名:xls、xlsx,文件不得大于1M</div>
                </el-upload>
              </el-form-item>
              <el-form-item label-width="100px">
                <!-- a:新建 （确定1）按钮
                 b:修改 （确定2） 按钮 -->
                 <el-button
                   v-if="str==='a'"
                   class="submit"
                   type="primary"
                    @click="submitForm('ruleForm1')">确 定1
                 </el-button>
                 <el-button
                   v-if="str==='b'"
                   class="submit"
                   type="primary"
                   @click="editChangeFn">确 定2
                 </el-button>
                <el-button @click="resetForm('ruleForm1')">取消</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
            <!--弹出框（遮罩层导入数据按钮） -------------------------------------------------------------------------------- -->
          <el-dialog title="数据导入" :visible.sync="dialogFormVisible2">
            <el-form :model="ruleForm2" :rules="rules2">
              <el-form-item label="标题:" prop="files" label-width="150px">
                  <el-upload
                      ref="upload"

                      name='fileName'
                      class="upload-demo"
                      action="https://likede2-admin.itheima.net/likede/api/vm-service/sku/upload"
                      accept="jpg jpeg、png、gif"
                      multiple
                      :file-list="fileList">
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text"><em>点击上传</em></div>
                      <div class="el-upload__tip" slot="tip">支持扩展名:xls、xlsx,文件不得大于1M</div>
                </el-upload>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" center: true>
              <el-button class="cancel" @click="cancelFn2">取 消</el-button>
              <el-button
                class="submit"
                type="primary"
                @click="submitFn2">确 定</el-button>
            </div>
          </el-dialog>
         <!--商品表单 ------------------------------------------------------------------------------- -->
          <!--el-table-column 列   label 列名  prop配置一列的值（接口数据)-->
            <el-table :data="tableData" style="width: 100%">
              <el-table-column type='index' label="序号" width="120px" prop="classId"></el-table-column>
              <el-table-column label="商品名称" prop="skuName"></el-table-column>
              <el-table-column label="商品图片" >
                <template slot-scope="scope">
                  <img :src="scope.row.skuImage" style="width:30px">
                </template>
              </el-table-column>
              <el-table-column label="品牌" prop="brandName"></el-table-column>
              <el-table-column label="规格" prop="unit"></el-table-column>
              <el-table-column label="商品价格" prop="price"></el-table-column>
              <el-table-column label="商品类型" prop="skuClass.className"></el-table-column>
              <el-table-column label="创建日期" prop="createTime"></el-table-column>
              <el-table-column label="操作" prop="parentId">
                <template #default="obj">
                  <el-button type="primary" style="border:none" @click="eidtFn(obj.row)">修改</el-button>
                </template>
              </el-table-column>
            </el-table>
          <!---------------------------------------------------------------------------------- -->
          <!-- 分页---------------------------------------------------------------------------------->
           <!-- current-change ： currentPage （当前页）改变时会触发 -->
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-count="+totalPage"
                :pager-count="5"
                layout="slot,->,prev, next"
                prev-text="上一页"
                next-text="下一页">
                <span>共{{totalCount}}条记录 第 {{pageIndex}} / {{totalPage}} 页</span>
            </el-pagination>
        </div>
    </el-col>
  </el-row>
  </div>
</template>

<script>
import { getManagementSearch, getManagementNewOpen } from '@/api/goods'
export default {
  name: 'productmanagement-page',
  data () {
    return {
      className: '',
      id: 0,
      ruleForm1: {},
      isAdd: false,
      skuImage: '',
      listArr: [],
      value: '',
      // 搜索头部
      skuName: '',
      skuNam1: '',
      // 新建按钮以及弹出框
      dialogFormVisible1: false,
      rules1: {},
      num: 1,
      price: 1,
      unit: '',
      brandName: '',
      // a:新建；b:修改
      arr: ['a', 'b'],
      str: '',
      // 导入数据按钮以及弹出框
      dialogFormVisible2: false,
      ruleForm2: {},
      rules2: {},
      fileList: [],
      // 商品列表
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      classId: 0,
      // 分页
      currentPage: 1,
      totalPage: 1,
      totalCount: 13
    }
  },
  methods: {

    //  async picFnn(file){
    //   console.log(111);
    //   console.log(file);
    //     await getManagementData(file)
    //   },
    addPic (row) {
      console.log(row)
    },
    // 封装一个渲染函数
    async render () {
      const res = await getManagementSearch({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        skuName: this.skuNam1,
        classId: this.classId
      })
      console.log(res)
      this.totalPage = res.totalPage
      this.totalCount = res.totalCount
      this.pageIndex = res.pageIndex
      this.pageSize = res.pageSize
      this.tableData = res.currentPageRecords
    },
    // 搜索头部
    onSubmit () {
      this.render()
    },
    // 新建按钮
    async openNew () {
      this.str = this.arr[0]
      this.dialogFormVisible1 = true
      const res = await getManagementSearch({
        pageIndex: 1,
        pageSize: this.totalCount
      })
      console.log(res)
      const arr = []
      res.currentPageRecords.forEach((item) => {
        if (arr.indexOf(item.skuClass?.className) === -1) {
          arr.push(item.skuClass?.className)
          this.listArr.push({ lable: item.skuClass?.className, value: item.skuClass?.classId })
        }
        // console.log(1)
      })
    },
    // 新建按钮弹出框
    picFn (file) {
      // console.log(file);
      this.skuImage = file
    },
    editChangeFn () {},
    // --------------------------------------------------------------------------------------
    resetForm () {
      // eslint-disable-next-line no-unused-expressions, no-sequences
      this.skuName = '',
      this.brandName = '',
      this.price = '',
      this.unit = '',
      this.value = '',
      this.dialogFormVisible1 = false
    },
    // --------------------------------------------------------------------------------------

    async submitForm () {
      // console.log(111)
      await getManagementNewOpen({
        skuName: this.skuName,
        skuImage: this.skuImage,
        price: this.price,
        classId: this.value,
        unit: this.unit,
        brandName: this.brandName
      })
      this.render()
      this.dialogFormVisible1 = false
    },
    handleChange (value) {
      console.log(value)
    },
    // 导入数据按钮
    inputData () {
      this.dialogFormVisible2 = true
    },
    cancelFn2 () {
      // this.dialogFormVisible2=true
    },
    submitFn2 () {
    // 1、清空内容（不会）
    // 2、关闭弹框
      this.dialogFormVisible2 = false
    },
    // 点击修改
    async eidtFn (row) {
      console.log(row)
      this.isAdd = false
      this.str = this.arr[1]
      this.dialogFormVisible1 = true
      this.brandName = row.brandName
      this.className = row.skuClass.className
      this.price = row.price
      this.value = row.skuClass.classId
      this.unit = row.unit

      // const res = await getManagementEdit(this.id,this.ruleForm1)
      // console.log(res)
    },
    // 商品列表
    // 分页
    handleCurrentChange (value) {
      this.pageIndex = value
      this.render()
    }
  },
  created () {
    this.render()
  }
}
</script>

<style lang="scss" scoped>

.el-row {
  margin-bottom: 10px;
::v-deep .el-dialog {
  border-radius: 10px;
  width: 35%;
}
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  .el-button.btn{
    width: 80px ;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg, #ff9743, #ff5e20) ;
    border: none;
  }
    .el-button.btn1{
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0!important;
    border: none;
    color: #655b56!important;
    }

  .el-button.submit{
    border: none;
    background: linear-gradient(135deg, #ff9743, #ff5e20) ;
  }
}

.header {
  background-color: #fff;
  display: flex;
  height: 64px;
  align-items: center;
  margin-bottom: 25px;
  padding-left: 17px;
  padding-top:20px;
    .el-form {
       display: flex;
       justify-content: center;
       align-items: center;
  ::v-deep .el-form-item {
      display: flex;
    }
}

  .el-button {
    flex: 1;
    min-width: 80px;
    height: 36px;
    padding: 0;
    background-color: #5f84ff;
    border: none;
  }
  ::v-deep .el-input__inner {
    height: 36px;
  }
}
.dialog-footer {
  text-align: center;
   .cancel {
    background-color: #fbf4f0;
    border: none;
    color: #655b56;
  }
   .el-input__inner{
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #d8dde3;
    color: #606266;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;

::v-deep .el-button .cancel  {
    background-color: #fbf4f0;
    border: none;
    color: #655b56;
    }
  }
}
.el-pagination {
  span {
     font-size: 16px!important;
    color: #dbdfe5!important;
  }
  .btn-prev {
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
    background-color: #d5ddf8;
  }
}
</style>
